<template>
  <div class="add-teacher">
    <h1 class="page-title">添加教师</h1>
    
    <div class="form-container">
      <el-form 
        :model="teacherForm" 
        :rules="rules" 
        ref="teacherFormRef" 
        label-width="100px"
        class="teacher-form"
      >
        <el-form-item label="教师工号" prop="teacherId">
          <el-input v-model="teacherForm.teacherId" placeholder="留空则自动生成"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="teacherForm.name" placeholder="请输入教师姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="teacherForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="teacherForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="teacherForm.phone" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="department">
          <el-input v-model="teacherForm.department" placeholder="请输入所属部门"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="teacherForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="初始密码" prop="password">
          <el-input v-model="teacherForm.password" placeholder="不填则使用默认密码" show-password></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const teacherFormRef = ref(null);

// 表单数据
const teacherForm = reactive({
  teacherId: '',
  name: '',
  gender: 1,
  email: '',
  phone: '',
  department: '',
  status: 1,
  password: ''
});

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入教师姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
};

// 提交表单
const submitForm = async () => {
  if (!teacherFormRef.value) return;
  
  await teacherFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await axios.post('/api/admin/teacher', teacherForm);
        if (response.data && response.data.success) {
          ElMessage.success('添加教师成功');
          router.push('/admin/teachers');
        } else {
          ElMessage.error(response.data.message || '添加教师失败');
        }
      } catch (error) {
        console.error('提交教师表单错误:', error);
        ElMessage.error(error.response?.data?.message || '操作失败，请稍后重试');
      }
    } else {
      return false;
    }
  });
};

// 重置表单
const resetForm = () => {
  if (teacherFormRef.value) {
    teacherFormRef.value.resetFields();
  }
};

// 返回
const goBack = () => {
  router.push('/admin/teachers');
};
</script>

<style scoped>
.add-teacher {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #333;
}

.form-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.teacher-form {
  max-width: 600px;
}
</style> 